<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <!-- 主表单区域 -->
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="保存方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="saveTyp">
              <j-dict-select-tag type="list" v-model="model.saveTyp" dictCode="spcHeadCfg_saveTyp"
                                 placeholder="请选择保存方式" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="检验参数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cfgid">
              <j-popup
                v-model="model.cfgid"
                field="cfgid"
                org-fields="rec_id,name,description,up_limit,low_limit"
                dest-fields="cfgid,name,description,usl,lsl"
                code="proc_pop"
                :multi="true"
                @input="popupCallback"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="检验项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" placeholder="请输入检验项目"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="检验描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="description">
              <a-input v-model="model.description" placeholder="请输入检验描述"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="规格上限" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="usl">
              <a-input-number v-model="model.usl" placeholder="请输入规格上限" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="规格中心" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sl">
              <a-input-number v-model="model.sl" placeholder="请输入规格中心" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="规格下限" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lsl">
              <a-input-number v-model="model.lsl" placeholder="请输入规格下限" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="阶段" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="stage">
              <j-dict-select-tag type="list" v-model="model.stage" dictCode="spcHeadCfg_stage"
                                 placeholder="请选择阶段" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="Xbar控制上限" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="uclx">
              <a-input-number v-model="model.uclx" placeholder="请输入Xbar控制上限" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="Xbar控制下限" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lclx">
              <a-input-number v-model="model.lclx" placeholder="请输入Xbar控制下限" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="R控制上限" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="uclr">
              <a-input-number v-model="model.uclr" placeholder="请输入R控制上限" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="R控制下限" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lclr">
              <a-input-number v-model="model.lclr" placeholder="请输入R控制下限" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="子组数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="spcTyp">
              <a-input-number v-model="model.spcTyp" placeholder="请输入子组数量" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
              <j-dict-select-tag type="list" v-model="model.status" dictCode="isEnabled" placeholder="请选择状态" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="计算CPK" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cpk">
              <j-dict-select-tag type="list" v-model="model.cpk" dictCode="isEnabled" placeholder="请选择计算CPK" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
    <!-- 子表单区域 -->
    <a-tabs v-model="activeKey" @change="handleChangeTabs">
      <a-tab-pane tab="判异规则" :key="refKeys[0]" :forceRender="true">
        <j-vxe-table
          keep-source
          :ref="refKeys[0]"
          :loading="qisSpcdetailCfgTable.loading"
          :columns="qisSpcdetailCfgTable.columns"
          :dataSource="qisSpcdetailCfgTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :toolbar="true"
        />
      </a-tab-pane>
    </a-tabs>
  </a-spin>
</template>

<script>

import { getAction } from '@/api/manage'
import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import { getRefPromise, VALIDATE_FAILED } from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'

export default {
  name: 'QisSpcheadCfgForm',
  mixins: [JVxeTableModelMixin],
  components: {
    JFormContainer
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      model: {},
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      validatorRules: {
        saveTyp: [
          { required: true, message: '请输入保存方式!' }
        ],
        cfgid: [
          { required: true, message: '请输入检验参数!' }
        ],
        name: [
          { required: true, message: '请输入检验项目!' }
        ],
        stage: [
          { required: true, message: '请输入阶段!' }
        ],
        spcTyp: [
          { required: true, message: '请输入子组数量!' }
        ]
      },
      refKeys: ['qisSpcdetailCfg'],
      tableKeys: ['qisSpcdetailCfg'],
      activeKey: 'qisSpcdetailCfg',
      // 判异规则
      qisSpcdetailCfgTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '字典表值',
            key: 'dictid',
            type: JVXETypes.select,
            options: [],
            dictCode: 'spcDetailCfg_dictId',
            width: '40%',
            placeholder: '请输入${title}',
            defaultValue: ''
          },
          {
            title: '配置项K值',
            key: 'kvalue',
            type: JVXETypes.input,
            width: '25%',
            placeholder: '请输入${title}',
            defaultValue: ''
          },
          {
            title: '状态',
            key: 'status',
            type: JVXETypes.select,
            options: [],
            dictCode: 'isEnabled',
            width: '25%',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }]
          }
        ]
      },
      url: {
        add: '/qis/qisSpcheadCfg/add',
        edit: '/qis/qisSpcheadCfg/edit',
        queryById: '/qis/qisSpcheadCfg/queryById',
        qisSpcdetailCfg: {
          list: '/qis/qisSpcheadCfg/queryQisSpcdetailCfgByMainId'
        }
      }
    }
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    }
  },
  created() {
  },
  methods: {
    addBefore() {
      this.qisSpcdetailCfgTable.dataSource = []
    },
    getAllTable() {
      let values = this.tableKeys.map(key => getRefPromise(this, key))
      return Promise.all(values)
    },
    /** 调用完edit()方法之后会自动调用此方法 */
    editAfter() {
      this.$nextTick(() => {
      })
      console.log('到这里')
      console.log(this.model)
      // 加载子表数据
      if (this.model.id) {
        let params = { id: this.model.id }
        this.requestSubTableData(this.url.qisSpcdetailCfg.list, params, this.qisSpcdetailCfgTable)
      }
    },
    //校验所有一对一子表表单
    validateSubForm(allValues) {
      return new Promise((resolve, reject) => {
        Promise.all([]).then(() => {
          resolve(allValues)
        }).catch(e => {
          if (e.error === VALIDATE_FAILED) {
            // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
            this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
          } else {
            console.error(e)
          }
        })
      })
    },
    /** 整理成formData */
    classifyIntoFormData(allValues) {
      let main = Object.assign(this.model, allValues.formValue)
      return {
        ...main, // 展开
        qisSpcdetailCfgList: allValues.tablesValue[0].tableData
      }
    },
    validateError(msg) {
      this.$message.error(msg)
    },
    popupCallback(value, row) {
      this.model = Object.assign(this.model, row)
    }

  }
}
</script>

<style scoped>
</style>